<template>
  <div class="app-container">
    <el-dialog
      :title="title"
      width="80%"
      height="100%"
      :close-on-click-modal="false"
      :append-to-body="true"
      :visible.sync="visible"
    >
      <div class="demo-drawer__content dialogContent">
        <el-form ref="form" :model="form" label-width="auto">
          <el-row>
            <el-col :span="6">
              <el-form-item label="产品型号:" prop="productCode">
                <el-input v-model="form.productCode" placeholder disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品类型:" prop="productType">
                <el-input v-model="form.productType" placeholder disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检验时间:" prop="inspectionDate">
                <el-input v-model="form.inspectionDate" placeholder disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同号:" prop="ftext4">
                <el-input v-model="form.ftext4" placeholder disabled />
              </el-form-item>
            </el-col>
        
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="技术分解单号:" prop="ftext1">
                <el-input
                  v-model="form.ftext1"
                  placeholder
                  :disabled="optType=='add'? false:true"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="报检数量:" prop="quinspection">
                <el-input v-model="form.quinspection" placeholder disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="抽样数量" prop="samplingQuantity">
                <el-input-number :controls="false" v-model="form.samplingQuantity" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="合格数量:" prop="qualifiedQuantity">
                <el-input v-model="form.qualifiedQuantity" placeholder disabled />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="不合格数量:" prop="unqualifiedQuantity">
                <el-input v-model="form.unqualifiedQuantity" placeholder disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 中间的table -->
          <el-row>
            <el-table v-loading="loading1" :data="templateList">
              <!-- <el-table-column type="index" label="序号" width="50" :index="indexMethod"></el-table-column> -->
              <el-table-column label="检查项目" align="center" prop="indexType" width="160px">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.mes_index_type" :value="scope.row.indexType" />
                </template>
              </el-table-column>

              <el-table-column label="检查内容" align="center" prop="indexName" width="260px" />

              <el-table-column
                v-for="(item,i) in form.samplingQuantity"
                :key="i"
                align="center"
                prop="checkResult"
                width="240px"
              >
                <template slot="header" slot-scope="scope">
                  <div >
                    {{ snObj[`snCode${i}`] }}
                  <!-- <span v-if="false">{{ `snCode${i}` }}</span>   -->
                  </div>
                </template>
                <template slot-scope="scope">
                  <div
                      style="font-size:20px"
                    >{{ scope.row[`checkResult${i}`] =='0' ? "×" :scope.row[`checkResult${i}`] =='1'?"√":"--" }}</div>
                  <!-- </el-form-item> -->
                </template>
              </el-table-column>
            </el-table>
          </el-row>

          <el-row :span="24" class="imgDiv">
              <el-form-item label="检验结果" prop="checkResult">
                <el-radio-group v-model="form.checkResult" disabled>
                  <el-radio :label="1" value="1">√</el-radio>
                  <el-radio :label="0" value="0">×</el-radio>
                </el-radio-group>
              </el-form-item>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" prop="remark">
                <el-input 
                  v-model="form.remark" 
                  placeholder="输入备注" 
                  disabled 
                  :autosize="{ minRows: 2, maxRows: 5 }" 
                  style="width: 450px; height: 100px" 
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <div v-if="form.checkResult==0">
            <el-row
              v-for="(item,i) in form.failedSncode"
              :key="item.snCode"
              style="box-shadow: 0 0 7px rgb(186, 186, 186);padding:0 20px;margin-bottom:15px"
            >
              <p>
                <span>序列号:</span>
                <span>{{ item.snCode }}</span>
              </p>
              <el-col :span="24">
                <el-form-item label="不合格处理方式" prop="repairState">
                  <el-radio-group v-model="item.repairState" disabled>
                    <el-radio :label="1">返工</el-radio>
                    <el-radio :label="2">返修</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="检验记录">
                  <el-table :data="item.exceptionLogList">
                    <el-table-column label="类型选择" align="center" prop="indexType">
                      <template slot-scope="scope">
                        <el-input
                          v-model="scope.row.indexType"
                          placeholder
                          type="textarea"
                          disabled
                        />
                      </template>
                    </el-table-column>

                    <el-table-column label="异常描述" align="center" prop="describeData">
                      <template slot-scope="scope">
                        <el-input
                          v-model="scope.row.describeData"
                          placeholder
                          type="textarea"
                          disabled
                        />
                      </template>
                    </el-table-column>
                    <el-table-column label="文件上传" align="center" prop="checkResult">
                      <template slot-scope="scope">
                        <ImageUpload
                          :limit="1"
                          :value="item.sopUrl"
                          :fileSize="15"
                          @onUploaded="handleImgUplaoded"
                          @onRemoved="handleImgRemoved"
                        ></ImageUpload>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="操作"
                      align="center"
                      class-name="small-padding fixed-width"
                    >
                      <template slot-scope="scope">
                        <el-button
                          size="medium"
                          type="text"
                          icon="el-icon-circle-plus-outline"
                          @click="errorAdd(item,i)"
                        ></el-button>
                        <el-button
                          v-if="scope.$index != 0"
                          size="medium"
                          type="text"
                          icon="el-icon-remove-outline"
                          @click="errorDel(scope.$index,i)"
                        ></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div class="demo-drawer__footer" style="text-align: right;">
        <el-button type="primary" @click="cancel" v-if="optType =='view'">返回</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDetail } from "@/api/mes/qc/qcOqcInspection";
export default {
  name: "Oqc_detail",
  dicts: ["mes_index_type"],
  data() {
    return {
      //自动生成编码
      autoGenFlag: false,
      title: "检验详情",
      visible: false,
      form: {},
      optType: undefined,
      // 模板列表
      templateList: [],
      inspectList: [],
      loading1: false,
      // 不合格数
      failedSncode: [],
      // 序列码集合
      snObj: {}
    };
  },
  created() {},
  methods: {
    init(isEdit, row) {
      console.log("详情页面", row);
      this.visible = true;
      getDetail(row).then(res => {
        console.log(res, "详情的res");
        this.form = { ...res.data };
        this.templateList = this.form.qcOqcInspectionItemList;
        let list = [];
        // this.inspectList = this.form.inspectList;
        // qcOqcCheckInfoList
        //转成number类型
        this.templateList.map((item, index) => {
          return (item.checkResult = Number(item.checkResult));
        });
        console.log( res.data.qcOqcCheckInfoList);
        let itemList= res.data.qcOqcCheckInfoList || []
        if (itemList.length > 0) {
          // this.form = { ...res.data[0].qcFqcAcInspectionHead };
          // list = res.data[0].itemList;
          console.log(this.templateList, "=======itemList====");
          for (let i = 0; i < itemList[0].inspectionItemList.length; i++) {
            let obj = itemList[0].inspectionItemList[i];
            list.push(obj);
          }
        }
        for (let i = 0; i < itemList.length; i++) {
          this.snObj[`snCode${i}`] = itemList[i].snCode; // sncode
          // 处理表格数据
          for (let j = 0; j < itemList[i].inspectionItemList.length; j++) {
            list[j][`checkResult${i}`] =itemList[i].inspectionItemList[j].checkResult; // 检验结果
          }
        }
        console.log(list,this.snObj, "=======list=====");
        this.templateList = list || [];
        //不合格处理方式的值转成number类型
        this.form.failedSncode.map(item => {
          return (item.repairState = Number(item.repairState));
        });
      });
    },
    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    //图片上传成功
    handleImgUplaoded(imgUrl) {
      console.log(imgUrl);
      this.form.sopUrl = imgUrl;
    },
    //图片移除
    handleImgRemoved(imgUrl) {
      console.log(imgUrl);
      this.form.sopUrl = null;
    },
    // 异常记录增加
    errorAdd(item, i) {
      let obj = {};
      this.failedSncode[i].exceptionLogList.push(obj);
    },
    // 删除异常记录
    errorDel(index, i) {
      this.failedSncode[i].exceptionLogList.splice(index, 1);
    },
    // 表单重置
    reset() {
      this.form = {
        iqcId: null,
        iqcCode: null,
        iqcName: null,
        templateId: null,
        vendorId: null,
        vendorCode: null,
        vendorName: null,
        vendorNick: null,
        vendorBatch: null,
        itemId: null,
        itemCode: null,
        itemName: null,
        specification: null,
        unitOfMeasure: null,
        quantityMinCheck: null,
        quantityMaxUnqualified: null,
        quantityRecived: null,
        quantityCheck: null,
        quantityUnqualified: null,
        crRate: null,
        majRate: null,
        minRate: null,
        crQuantity: null,
        majQuantity: null,
        minQuantity: null,
        checkResult: null,
        reciveDate: null,
        inspectDate: null,
        inspector: null,
        status: "PREPARE",
        remark: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.autoGenFlag = false;
      this.resetForm("form");
    }
  }
};
</script>

<style>
</style>